<template>
    <!-- 抵押流程模块 -->
    <div class="flow w">
        <h3>申请抵押流程</h3>
        <div class="flow_content">
            <img src="../../assets/style/img/flow_image/编组 2.png" alt="">
        </div>
        <div class="tip">
            <h4>友情提示：</h4>
            <p>1.正常情况下，一般调查、审批会在3个工作日内结束给予是否同意贷款的回复。在客户提供的资料齐全的情况下，银行办理放款手续一般也是3个工作日。</p>
            <p>2.借款人借款所需提供资料：借款人及配偶身份证、结婚证、收入证明（工作证明、营业执照等）、贷款用途证明、宅基地不动产权证。</p>
        </div>
      <!-- 客服服务模块start -->
    <div class="serviceperson clearfix">
        <div class="person">
            <div class="free left">免费咨询</div>
            <div class="only right"><img src="../../assets/style/img/service_image/在线咨询.svg" alt=""></div>
        </div>
        <div class="service">
            <div class="number">
                <p><span class="icon-wechat"></span> 专属客服001 <i class="icon-cheveron-down"></i></p>
            </div>
            <div class="message">
                <i class="icon-wechat"></i>
                <div class="dh">
                    <p>您好，我是您的专属金融客服001，请问有什么可以帮到您？</p>
                </div>
            </div>
            <div class="input_content">
                <p><span class="icon-smile"></span><span class="icon-image"></span></p>
                <textarea name="" id="" cols="50" rows="6" placeholder="请输入您的问题  按Enter直接发送"></textarea>
                <button>发送</button>
            </div>
        </div>
    </div>
    <!-- 客服服务模块end -->
    </div>
</template>

<script>
import '../service'

export default {
  name:'Flow'
}
</script>

<style lang='less' scoped>
.flow{
  position: relative;
  padding-top: 30px;
  h3{
    height: 42px;
    border-left: 4px solid #EE384A;
    padding-left: 10px;
    // margin-bottom: 20px;
    font-family: PingFangSC-Regular;
    font-size: 28px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 400;
}
.flow_content{
  width: 100%;
  margin: 40px auto 30px;
  img{
    transform: translateX(201px);
  }
}
.tip{
  padding: 16px 10px;
  height: 152px;
  margin-bottom: 30px;
  background: #F5F5F5;
  border-radius: 8px;
  font-family: PingFangSC-Regular;
  letter-spacing: 0;
  line-height: 40px;
  font-weight: 400;
h4{
  // font-family: PingFangSC-Regular;
  font-size: 26px;
  color: #EE384A;
  // letter-spacing: 0;
  // line-height: 40px;
  // font-weight: 400;
}
p{
  // font-family: PingFangSC-Regular;
  font-size: 16px;
  color: #333333;
  // letter-spacing: 0;
  // line-height: 40px;
  // font-weight: 400;
}
}
}

// 客服咨询模块
.serviceperson{
  z-index: 999;
  position: absolute;
  top: 400px;
  right: -370px;
  width: 480px;
  font-family: PingFangSC-Regular;
  letter-spacing: 0;
  .person{
    position: relative;
    width: 480px;
    height: 60px;
    margin-bottom: 30px;
    text-align: center;

    .free{
      position: relative;
      margin-top: 7px;
      float: left;
      width: 100px;
      height: 46px;
      background: #999;
      font-size: 16px;
      color: #FFFFFF;
      font-weight: 400;
      line-height: 46px;
      display: none;
    }
    .free::after {
      content: '';
      position: absolute;
      border: 8px solid;
      border-color: transparent transparent transparent #999;
      right: -16px;
      top: 16px;
}
    .right{
      position: absolute;
      top: 0;
      left: 110px;
      width: 60px;
      height: 60px;
      background: #EE384A;
      border-radius: 8px;
      padding-top: 12px;
    }
  }
  .service{
    display: none;
    width: 480px;
    height: 542px;
    background: #FFFFFF;
    box-shadow: -2px 0px 6px 0px rgba(0,0,0,0.1);
    border-radius: 8px;
    .number{
      position: relative;
      height: 44px;
      background: #EE384A;
      border-radius: 8px 8px 0px 0px;
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      color: #FFFFFF;
      font-weight: 600;
      line-height: 44px;
      p{
        padding-left: 50px;
      }
      .icon-wechat{
        position: absolute;
        top: 6px;
        left: 10px;
        color: black;
        font-size: 28px;
      }
      .icon-cheveron-down{
        position: absolute;
        top: 15px;
        right: 20px;
        font-size: 18px;
      }
    }
    .message{
      position: relative;
      width: 480px;
      height: 326px;
      border-bottom: 1px solid #D8D8D8;
      .dh{
        position: absolute;
        top: 30px;
        left: 56px;
        width: 373px;
        height: 64px;
        padding: 16px 20px;
        background: #F5F5F5;
        font-size: 14px;
        color: #333333;
        text-align: justify;
        font-weight: 400;
        ::before {
          content: '';
          position: absolute;
          border: 8px solid;
          border-color: transparent #F5F5F5 transparent transparent;
          left: -16px;
          top: 24px;
    }
      }
      .icon-wechat{
        font-size: 28px;
        position: absolute;
        top: 40px;
        left: 8px;
      }
    }
    .input_content{
      position: relative;
      p{
        padding-left: 12px;
        margin-top: 12px;
      }
      span{
        font-size: 20px;
        margin-right: 12px;
      }
      textarea{
        padding: 6px 10px;
        border: 0;
        outline: none;
	      resize: none;
      }
      button{
        position: absolute;
        bottom: -22px;
        right: 16px;
        width: 40px;
        height: 24px;
        background: #EE384A;
        border-radius: 4px;
      }
    }
  }
}
</style>